「前端导出 Excel/csv 文件」

Posted on | In

前端导出excel/csv文件

安装所需js

fileSaver
Blob

安装基于npm,先确认安装了nodeJS。进入项目目录，在根目录下打开终端执行行以下代码

npm install file-saver --save

bower install file-saver

安装完成后可以看到在node_modules文件里新增的文件夹file-saver和filesaver 其中 filesaver文件夹为filesaver.js源码

引用fileSaver

在需要下载导出页面对应的JS文件处引入filesaver文件

import FileSaver from 'file-saver';

const {saveAs} = FileSaver;

新建Blob对象

BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。(来自百度百科)

var Blob = new Blob(["JSON"],{type:''})

blob的结构
  • Blob(blobParts[, options])
更多Blob 资料

引用saveAs

saveAs(Blob,filename,boolean)

第三个参数boolean如果传true filesaver.js就不会对你的文件自动设置类型

new Blob有浏览器兼容问题，如需考虑浏览器兼容问题，需要引入Blob.js

demo

1
2
3
4
5
6
7
8
9
function Clickhandle (){
var blob = new Blob
(
["Hello, world!"],
{type: "text/plain;charset=utf-8"}
);

saveAs(blob, "hello world.txt");
}

注意下载导出功能只能写在事情回调函数里，如某个button的onClick事件中

导出文件类型

  • csv
1
2
3
4
5
var exportContent = "\uFEFF";
var blob = new Blob([exportContent+data("")],
{type: "text/plain;charset=utf-8"}
);
saveAs(blob, downloadName + ".csv");
  • excel
1
2
3
4
5
var exportContent = "\uFEFF";
var blob = new Blob([exportContent+data("")], {
type: "application/vnd.ms-excel;charset=charset=utf-8"
});
saveAs(blob, downloadName + ".xls");

其中加入exportContent = “\uFEFF”;可以防止中文乱码